<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="/skw/js/common/header.js"></script>
    <link href="/skw/js/plugins/ztree/metroStyle/metroStyle.css" rel="stylesheet">
    <script src="/skw/js/plugins/ztree/jquery.ztree.all.min.js"></script>

    <link href="/skw/css/plugins/dataTables/dataTables.bootstrap.min.css" rel="stylesheet">
    <script src="/skw/js/plugins/dataTables/jquery.dataTables.min.js"></script>
    <script src="/skw/js/plugins/dataTables/dataTables.bootstrap.min.js"></script>
    <script src="/skw/js/common/sk.datatables.js"></script>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-4">
            <div id="nestable-menu">
                <button type="button" data-action="expand-all" class="btn btn-white btn-sm">展开所有</button>
                <button type="button" data-action="collapse-all" class="btn btn-white btn-sm">收起所有</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>系统菜单管理</h5>
                </div>
                <div class="ibox-content">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>

            </div>
        </div>
        <div class="col-sm-9">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>菜单编辑</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="input-group">
                                <input type="text" placeholder="菜单名称" class="input-sm form-control">
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="input-group">
                                <a type="button" class="btn btn-sm btn-primary" style="margin-right: 10px"> 搜索
                                </a>
                                <a href="javascript:;" class="btn btn-sm btn-warning" id="addObject"> 增加</a>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table class="table table-striped" id="dataTables">
                            <thead>
                            <tr>
                                <th>id</th>
                                <th>上级菜单</th>
                                <th>菜单名称</th>
                                <th>菜单URL</th>
                                <th>类型</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="text" name="id" class="form-control" readonly>
<input type="text" name="parentId" class="form-control" placeholder="请输入文本" readonly>
<input type="hidden" id="editUrl" value="admin/system/menu-edit.html">
<input type="hidden" id="addUrl" value="admin/system/menu-edit.html">
<input type="hidden" id="deleteUrl" value="admin/sysMenu/delete">
</body>

<SCRIPT type="text/javascript">
    var columns = [
        {"id": "id", "data": "id", "visible": false},
        {"data": "parentName"},
        {"data": "name"},
        {"data": "funUrl"},
        {
            "data": "type",
            "render": function (data, type, row, meta) {
                var str = '';
                if (data === "1") {
                    str = '菜单';
                } else if (data === "2") {
                    str = '页面';
                } else if (data === "3") {
                    str = '功能';
                }
                return str;
            }
        },
        {"data": "createTime"},
        {"data": ""}
    ];
    var r = '<a class="btn btn-xs btnAddson btn-info">新增子节点</a> ' +
        '<a class="btn btn-xs tbEdit btn-warning">编辑</a> ' +
        '<a class="btn btn-xs tbDelete btn-danger">删除</a> ';

    var setting = {
        data: {
            simpleData: {
                enable: true,
                pIdKey: "parentId"
            }
        },
        callback: {
            onClick: function (event, treeId, treeNode, clickFlag) {
                myTables.destroy();
                initTables('admin/sysMenu/list?parentId=' + treeNode.id, columns, r);
            }
        }
    };

    var zTree;

    $(document).ready(function () {
        $.post(baseUrl + 'admin/sysMenu/listAll', {}, function (data) {
            var zNodes = data.value;
            zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            zTree.expandAll(true);
        })

        initTables('admin/sysMenu/list?parentId=0', columns, r);

        $('#nestable-menu').on('click', function (e) {
            var target = $(e.target),
                action = target.data('action');
            if (action === 'expand-all') {
                zTree.expandAll(true);
            }
            if (action === 'collapse-all') {
                zTree.expandAll(false);
            }
        });

        $("#btnSave").click(function () {
            var str = $("#myForm").serializeArray();
            $.ajax({
                url: baseUrl + 'admin/sysMenu/save',
                type: 'post',
                data: str,
                success: function (data) {
                    if (data.code === 0) {
                        layer.msg("操作成功");
                        setTimeout(function () {
                            location.reload();
                        }, 1000)
                    } else {
                        layer.msg(data.message);
                    }
                },
                error: function () {
                    layer.msg("请求出错")
                }
            });
        });

        $('#dataTables').on('click', '.btnAddson', function () {
            var data = myTables.row($(this).parents('tr')).data();

            var editUrl = $('#editUrl').val();
            var str = '?';
            if (editUrl.indexOf('?') > -1) {
                str = '&';
            }
            editUrl += str + 'parentId=' + data.id + "&type=" + data.type;
            location.href = baseUrl + editUrl;
        })
    });
</SCRIPT>
</html>
